<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>


  <div id="app">
    <!-- 输出：html标签在渲染的时候被解析 -->
    <p v-html="html"></p>
    <!-- 输出：<span style='color: red'>通过双括号绑定</span> -->
    <p>{{message}}</p>
    <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
    <p v-text="text"></p>
  </div>
  <script>
    let app = new Vue({
      el: "#app",
      data: {
        message: "<span style='color: red'>通过双括号绑定</span>",
        html: "<span style='color: orange'>html标签在渲染的时候被解析</span>",
        text: "<span>html标签在渲染的时候被源码输出</span>",
      }
    });
  </script>
</body>
</html>
